<template>
  <div class="chart-root-wrapper" style="width: 100%">
    <div class="chart-title-wrapper">
      <div class="chart-title">扇区记录</div>
      <div class="chart-options">
        <el-form inline size="small">
          <el-form-item label="内容设置">
            <el-radio-group v-model="showTable">
              <el-radio :value="false">图表</el-radio>
              <el-radio :value="true">数值</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="图表类型">
            <el-radio-group v-model="office" @change="handleRedraw">
              <el-radio :value="true">分科室</el-radio>
              <el-radio :value="false">合计</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="显示顺序">
            <el-radio-group v-model="order" @change="handleRedraw">
              <el-radio :value="true">正序</el-radio>
              <el-radio :value="false">倒序</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="chart-content-wrapper">
      <el-scrollbar style="width: 100%">
        <v-chart
          v-if="sourceSector != null && !hideChart && showChart && !showTable"
          :style="{
            width: sourceSector.count * 60 + 200 + 'px',
            height: '400px',
          }"
          :option="option"
          ref="chart"
        />
        <el-empty
          v-if="hideChart"
          description="数据过大，已关闭图表"
        ></el-empty>
        <el-table
          v-if="source != null && showChart && showTable"
          :data="tableData"
        >
          <el-table-column
            prop="name"
            label="项目"
            width="120"
          ></el-table-column>
          <el-table-column
            v-for="(tag, i) in sourceSector.labels"
            :prop="'col' + 1"
            :label="tag"
            width="120"
          ></el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
import dayjs from "dayjs";
import useHourStore from "@/store/hour.js";
import useCommonStore from "@/store/common.js";
import fetchSectors from "./fetchSectors.js";

// import echarts
// import { use } from "echarts/core";
import * as echarts from "echarts/core";
import { SVGRenderer, CanvasRenderer } from "echarts/renderers";
import {
  BarChart,
  // LineChart,
  // ScatterChart,
  // EffectScatterChart,
} from "echarts/charts";
import {
  // LegendComponent,
  // TitleComponent,
  TooltipComponent,
  GridComponent,
  // DatasetComponent,
  // TransformComponent,
  // PolarComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import VChart, { THEME_KEY } from "vue-echarts";

echarts.use([
  CanvasRenderer,
  BarChart,
  // LineChart,
  // ScatterChart,
  // EffectScatterChart,
  // LegendComponent,
  // TitleComponent,
  TooltipComponent,
  GridComponent,
  // DatasetComponent,
  // TransformComponent,
  // PolarComponent,
  LabelLayout,
  // UniversalTransition,
]);

const hourStore = useHourStore();
const commonStore = useCommonStore();

const office = ref(false);
const order = ref(false);

const showChart = ref(true);
const showTable = ref(false);

const hideChart = computed(() => {
  if (source.value == null) {
    return false;
  } else if (
    source.value.content &&
    (source.value.count > 1000 || source.value.content.length > 1000)
  ) {
    return true;
  }
});

const tableData = computed(() => {
  let data = [{ name: "扇区数" }, { name: "一室扇区" }, { name: "二室扇区" }];
  for (let i = 0; i < sourceSector.value.labels.length; i++) {
    data[0]["col" + i] = sourceSector.value.values[i] + " 扇区";
    data[1]["col" + i] = sourceSector.value.values1[i] + " 扇区";
    data[2]["col" + i] = sourceSector.value.values2[i] + " 扇区";
  }
  return data;
});

const handleRedraw = async () => {
  showChart.value = false;
  await nextTick();
  showChart.value = true;
  // setTimeout(() => {
  //   showChart.value = true;
  // }, 500);
  // if (chart.value) {
  //   chart.value.resize();
  // }
};

const source = computed(() => hourStore.generalViewConfigs.source);

const sourceSector = computed(() => {
  if (order.value) {
    return hourStore.generalViewConfigs.sourceSector;
  } else {
    let temp = JSON.parse(
      JSON.stringify(hourStore.generalViewConfigs.sourceSector)
    );
    temp.labels.reverse();
    temp.values.reverse();
    temp.values1.reverse();
    temp.values2.reverse();
    return temp;
  }
});

const option = computed(() => {
  return {
    grid: office.value
      ? [
          {
            left: 30,
            right: 20,
            height: "30%",
          },
          {
            left: 30,
            right: 20,
            top: "54.6%",
            height: "30%",
          },
        ]
      : {
          left: 30,
          right: 20,
          // x2: 50,
          // y2: 50,
          height: "65.6%",
        },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: { type: "cross" },
    },
    xAxis: office.value
      ? [
          {
            gridIndex: 0,
            type: "category",
            // show: false,
            // axisLine: { onZero: true },
            data: sourceSector.value.labels.map((label) => {
              return {
                value: label,
                textStyle: {
                  color: commonStore.darkMode
                    ? "rgba(255,255,255,0.3)"
                    : "rgba(0,0,0,0.3)",
                  fontSize: "11px",
                  overflow: "break",
                },
              };
            }),
          },
          {
            gridIndex: 1,
            type: "category",
            // show: false,
            position: "top",
            // axisLine: { onZero: true },
            data: sourceSector.value.labels.map((label) => {
              return {
                value: label,
                textStyle: {
                  color: commonStore.darkMode
                    ? "rgba(255,255,255,0.3)"
                    : "rgba(0,0,0,0.3)",
                  fontSize: "11px",
                  overflow: "break",
                },
              };
            }),
          },
        ]
      : {
          gridIndex: 0,
          type: "category",
          show: true,
          data: sourceSector.value.labels.map((label) => {
            return {
              value: label,
              textStyle: {
                color: commonStore.darkMode
                  ? "rgba(255,255,255,0.5)"
                  : "rgba(0,0,0,0.5)",
                fontSize: "11px",
                overflow: "break",
              },
            };
          }),
        },
    yAxis: office.value
      ? [
          {
            gridIndex: 0,
            id: 0,
            type: "value",
            // name: "扇区数量",
            position: "left",
            axisLine: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false },
          },
          {
            gridIndex: 1,
            id: 1,
            type: "value",
            // name: "扇区数量",
            position: "left",
            axisLine: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false },
            inverse: true,
          },
        ]
      : {
          gridIndex: 0,
          id: 0,
          type: "value",
          // name: "扇区数量",
          position: "left",
          axisLine: { show: false },
          axisLabel: { show: false },
          splitLine: { show: false },
        },
    series: office.value
      ? [
          {
            name: "一室",
            data: sourceSector.value.values1,
            type: "bar",
            xAxisIndex: 0,
            yAxisIndex: 0,
            coordinateSystem: "cartesian2d",
            smooth: false,
            emphasis: false,
            label: {
              show: true,
              formatter: (item) => (item.value == 0 ? "" : item.value),
              color: commonStore.darkMode ? "#000" : "#FFF",
              textBorderColor: commonStore.darkMode
                ? "rgba(255,255,255,0.75)"
                : "rgba(0,0,0,0.75)",
              textBorderWidth: 2,
              fontSize: "16px",
              fontWeight: "bold",
              distance: 12,
            },
            lineStyle: {
              color: commonStore.darkMode
                ? "rgba(255,255,255,0.5)"
                : "rgba(0,0,0,0.3)",
              type: "dotted",
              opacity: 1,
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  // color: "rgb(220, 96, 76)",
                  color: "#F8C4B4",
                },
                {
                  offset: 1,
                  // color: "rgb(255, 191, 0)",
                  color: "#FF8787",
                },
              ]),
              borderRadius: 50,
            },
            clip: false,
          },
          {
            name: "二室",
            data: sourceSector.value.values2,
            type: "bar",
            xAxisIndex: 1,
            yAxisIndex: 1,
            coordinateSystem: "cartesian2d",
            smooth: false,
            emphasis: false,
            label: {
              show: true,
              formatter: (item) => (item.value == 0 ? "" : item.value),
              color: commonStore.darkMode ? "#000" : "#FFF",
              textBorderColor: commonStore.darkMode
                ? "rgba(255,255,255,0.75)"
                : "rgba(0,0,0,0.75)",
              textBorderWidth: 2,
              fontSize: "16px",
              fontWeight: "bold",
              distance: 12,
            },
            lineStyle: {
              color: commonStore.darkMode
                ? "rgba(255,255,255,0.5)"
                : "rgba(0,0,0,0.3)",
              type: "dotted",
              opacity: 1,
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  // color: "rgb(66, 152, 255)",
                  // color: "#a3b",
                  color: "#6096B4",
                },
                {
                  offset: 1,
                  // color: "rgb(116, 21, 219)",
                  color: "#93BFCF",
                },
              ]),
              borderRadius: 50,
            },
            clip: false,
          },
        ]
      : [
          {
            name: "合计",
            data: sourceSector.value.values,
            type: "bar",
            xAxisIndex: 0,
            yAxisIndex: 0,
            coordinateSystem: "cartesian2d",
            smooth: false,
            emphasis: false,
            label: {
              show: true,
              formatter: (item) => (item.value == 0 ? "" : item.value),
              color: commonStore.darkMode ? "#000" : "#FFF",
              textBorderColor: commonStore.darkMode
                ? "rgba(255,255,255,0.75)"
                : "rgba(0,0,0,0.75)",
              textBorderWidth: 2,
              fontSize: "16px",
              fontWeight: "bold",
              distance: 12,
            },
            lineStyle: {
              color: commonStore.darkMode
                ? "rgba(255,255,255,0.5)"
                : "rgba(0,0,0,0.3)",
              type: "dotted",
              opacity: 1,
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  // color: "rgb(128, 255, 165)",
                  color: "#EBC7E8",
                },
                {
                  offset: 1,
                  // color: "rgb(1, 191, 236)",
                  color: "#645CAA",
                },
              ]),
              borderRadius: 50,
            },
            clip: false,
          },
        ],
  };
});

const chart = ref();
let resizeTimer = null;
onMounted(() => {
  resizeTimer = setInterval(() => {
    if (chart.value) {
      chart.value.resize();
    }
  }, 1000);
});

onUnmounted(() => {
  clearInterval(resizeTimer);
  resizeTimer = null;
});
</script>

<style scoped>
@import "./chartStyles.css";
</style>
